import { Button, message, Form, Input, Space } from "antd";
import { useModel } from "umi";
import { useReactive } from "ahooks";

const EditOrganizationReferenceDatabaseModal = ({ record, reloadData }) => {
    const { graphqlFetchPlatform } = useModel("global");
    const { onCloseGlobalModal } = useModel("global.modal");
    const [form] = Form.useForm();

    const state = useReactive({
        submitLoading: false,
    });

    const onFinish = async (values) => {
        state.submitLoading = true;
        values.uuid = record.uuid;
        const query = `mutation MyMutation($uuid: UUID!, $databaseName: String!, $graphqlServiceName: String!, $heartBeatParams: String, $title: String!) {
            updateOrganizationReferenceDatabasisByUuid(
              input: {organizationReferenceDatabasisPatch: {databaseName: $databaseName, graphqlServiceName: $graphqlServiceName, heartBeatParams: $heartBeatParams, title: $title}, uuid: $uuid}
            ) { clientMutationId }
        }`;
        let res = await graphqlFetchPlatform({ query, variables: values });
        if (res) {
            message.success("成功添加组织参考数据库信息");
            await reloadData();
            onCloseGlobalModal();
        }
        state.submitLoading = false;
    };

    return (
        <div style={{ padding: 30 }}>
            <Form form={form} onFinish={onFinish} layout="horizontal" labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} initialValues={record}>
                <Form.Item label="参考数据库标题" name="title" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>

                <Form.Item label="参考数据库名称" name="databaseName" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>

                <Form.Item label="数据服务名称" name="graphqlServiceName" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>

                <Form.Item label="心跳检查参数" name="heartBeatParams">
                    <Input />
                </Form.Item>

                <div style={{ textAlign: "center" }}>
                    <Space>
                        <Button loading={state.submitLoading} type="primary" htmlType="submit">
                            提交
                        </Button>
                        <Button loading={state.submitLoading} htmlType="button" onClick={() => form.resetFields()}>
                            重置
                        </Button>
                    </Space>
                </div>
            </Form>
        </div>
    );
};

export default EditOrganizationReferenceDatabaseModal;
